<template>
  <div class="mobile-container">

    <van-cell is-link @click="showPopup">关于社团管理者和管理员注册?</van-cell>
    <van-popup v-model:show="show" overlay=false>请向学校申请账号<br>负责人电话：xxxx</van-popup>
    <span>学生注册</span>
    <div>
      <van-cell-group>
        <van-field v-model="account" label="账号" placeholder="请输入学号" type="text"/>
        <van-field v-model="nickname" label="昵称" placeholder="请输入用户名" type="text"/>
        <van-field v-model="password" label="密码" type="password" placeholder="请输入密码"/>
        <van-field v-model="repassword" label="确认密码" type="password" placeholder="请再次输入密码"/>
        <van-field v-model="qq" label="联系qq" type="qq" placeholder="请输入qq号"/>
        <van-cell title="选择性别">
          <van-radio-group v-model="gender" direction="horizontal">
            <van-radio name="0">男</van-radio>
            <van-radio name="1">女</van-radio>
          </van-radio-group>
        </van-cell>
        <van-cell>
          <van-datetime-picker
              v-model="currentDate"
              type="date"
              title="选择出生年月"
              :min-date="minDate"
              :max-date="maxDate"
          />
        </van-cell>
        <van-cell title="选择头像"/>
        <van-grid>
          <van-grid-item v-for=" i in imagename.value">
            <van-image
                round
                width="5rem"
                height="5rem"
                fit="cover"
                :src="i"
                @click="selectAvatar(i)"
            />
          </van-grid-item>
        </van-grid>
        <van-cell>
          <van-button @click="randomHandImage" size="large">换一批头像</van-button>
        </van-cell>
        <van-cell title="上传头像"><van-uploader :after-read="afterRead" /></van-cell>
        <van-cell title="选择的头像">
          <van-image
              round
              width="5rem"
              height="5rem"
              fit="cover"
              :src="avatar"
          />
        </van-cell>
        <van-cell >
          <van-button type="primary" size="large" @click="register">注册</van-button>
        </van-cell>
      </van-cell-group>
      <br>
      <br>
      <br>
      <br>
    </div>
  </div>

</template>

<script lang="ts">
import {reactive, ref} from 'vue';
import {Toast} from "vant";
import {useRouter} from "vue-router";

export default {
  setup() {
    const debug = false;
    const show = ref(false);
    const avatar=ref("");
    const afterRead = (file: { file:File }) => {
      // 此时可以自行将文件上传至服务器
      const formData= new FormData()
      formData.set("file",file.file)
      fetch("api/assets/",{
        method:"post",
        body:formData
      }).then(res=>{
        if (debug){
          console.log(res.status);
          console.log(res);
        }
        return res.json();
      }).then(json=>{
        if (debug){console.log(json)}
        avatar.value = json.path;
        if (debug){console.log(avatar.value)}
      })
    };
    const router = useRouter();
    const showPopup = () => {
      show.value = true;
    };
    const imagename = reactive({
      value: [] as any
    });
    // for(let i = 1 ; i <= 9 ; i ++ ){
    //   imagename.push("http://tantsz.com/public/"+i+".jpg");
    // }
    const randomHandImage=function (){
      fetch("api/assets/shuffle?count=8").then(res=>{
        if(res.status == 200){
          return res.json()
        }
      }).then(json=>{

        imagename.value = [];
        json.forEach( (item: { path: string; }) =>{
          imagename.value.push(item.path)
        })
        console.log(imagename.value)
      })
    }
    randomHandImage();
    const currentDate = ref(new Date());
    return {
      show,
      showPopup,
      imagename,
      minDate: new Date(1980, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate,
      router,
      afterRead,
      avatar,
      randomHandImage,

    };
  },
  data() {
    return {
      account: '',
      password: '',
      repassword: '',
      nickname: '',
      gender: '0',
      qq:'',
    }
  },
  methods: {
    register() {
      // console.log((this as any).currentDate)
      if((this as any).account==""){
        Toast("学号为空")
        return;
      }else if(
          (this as any).account.length!=11
      ){
        Toast("学号长度为11")
        return;
      }else if(
          (this as any).nickname == ""
      ){
        Toast("昵称为空")
        return;
      }else if(
          (this as any).password == ""
      ){
        Toast("密码为空")
        return;
      }else if(
          (this as any).repassword == ""
      ){
        Toast("确认密码为空")
        return;
      }else if(
          (this as any).password != (this as any).repassword
      ){
        Toast("俩次密码不相同")
        return;
      }else if(
          ( this as any ).avatar==''
      ){
        Toast("请选择或上传头像")
        return;
      }else if(
          ( this as any ).qq==''
      ){
        Toast("请输入qq号")
        return;
      }
      fetch("api/registry/ap", {

        method: 'post',
        headers: {
          "content-type": "application/json"
        },
        body: JSON.stringify({
          account:( this as any ).account,
          password:( this as any ).password,
          avatar:( this as any ).avatar,
          birthday:( this as any ).currentDate.toISOString(),
          gender:parseInt(( this as any ).gender),
          qq:( this as any ).qq,
          nickname:( this as any ).nickname
        })
      }).then(
          res=>{
            if(res.status==200){
              Toast("注册成功，3秒后转向登陆界面");
              setTimeout(()=>{
                Toast("跳转");
                ( this as any ).router.push({path:"/login"});
              },3000)
            }
          }
      )
    },
    selectAvatar(src:string){
      (this as any).avatar = src;
    }
  },
  watch:{
    avatar:function (){
      Toast({
        message: '头像选择成功，详情情况最下方',
        icon: ( this as any ).avatar
      });
    }
  }
};
</script>
<style>
.mobile-container {
  margin: 0 10px;
}
</style>